<template>
  <div class="welcome">
    <div class="background"></div>
    <div class="result_card">
      <div shadow="always" class="grid_position">
        <div style="font-size:25px; font-weight: 700;overflow: hidden;" class="gridone">
          <div style="overflow: hidden;">
            {{info.testName}}
          </div>

        </div>
        <div class="totalScore gridtwo">
          总分：{{info.totalScore}} 分
        </div>
        <div class="score gridthree">
          得分: <span style="font-size:24px; color:rgba(26, 113, 235, 1) ;">{{data.score}}</span>
        </div>
        <div class="time gridfour">用时：{{data.completionTime}}</div>
        <div class="gridfive">
          <router-link :to="{path:'/'}">
            <button class="button_box" >确定</button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['test_paper'],
    name: 'fraction',
    data() {
      return {
        info: {},
        data: {},
        // fraction: 100,
        // test_title: '贵州理工安全教育',
        name: this.$store.state.usname
      }
    },
    mounted() {
      this.info = this.$route.query
      this.$postRequest({
        url: '/scoreInfo/lookMyScore'
      }).then(res=>{
        if(res.code === 200){
          this.data = res.data
        }
      })
    }
  }
</script>

<style>
  .grid_position{
    display: grid;
    grid-template-areas:
    'gridone gridone'
    'gridtwo gridthree'
    'gridfour gridfour'
    'gridfive gridfive';
  }
  .grid_position>div{
    padding-left: 8px;
    display: flex;
    align-items: center;
  }
  .gridone{
    grid-area: gridone;

  }
  .gridtwo{
    grid-area: gridtwo;
  }
  .gridthree{
    grid-area: gridthree;
  }
  .gridfour{
    grid-area: gridfour;
  }
  .gridfive{
    grid-area: gridfive;
    display: flex;
    justify-content: center;
  }
  .welcome {
    font-family: "franklin gothic medium cond";
    width: 100vw;
    height: 100vh;
  }

 .background {
    background-color: rgba(26, 113, 235, 1);
    width: 100%;
    height: 168px;
  }

  .result_card {
    width: 90vw;
    height: 168px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-top: -150px;
    margin-left: 5%;
  }

 /* .score {
    font-size: 18px;
    margin-left: 70%;
  }

  .totalScore {
    font-size: 18px;
    margin-top: -40px;
    margin-left: -65%;
  }
  .time{
    position:relative;
    margin-top: 10px;
    font-size: 18px;
    margin-left: -65%;
  } */
  .button_box {
    font-size: 18px;
    border:rgba(26, 113, 235, 1) ;
    color:rgba(255, 255, 255, 1) ;
    background-color: rgba(26, 113, 235, 1);
    border-radius: 8px;
    width: 255px;
    height: 40px;
    margin-top: 10px;
  }
</style>
